<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link href="${request.contextPath}/static/ihomeStatic/css/bootstrap.min.css" rel="stylesheet">
    <link href="${request.contextPath}/static/ihomeStatic/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="${request.contextPath}/static/ihomeStatic/css/font-awesome.min.css" rel="stylesheet">
    <link href="${request.contextPath}/static/ihomeStatic/css/animate.min.css" rel="stylesheet">
    <link href="${request.contextPath}/static/ihomeStatic/css/style.min.css" rel="stylesheet">
    <link href="${request.contextPath}/static/ihomeStatic/js/layer/mobile/need/layer.css" rel="stylesheet">
    <link href="${request.contextPath}/static/ihomeStatic/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">


    <style></style>

</head>
<body class="fixed-sidebar full-height-layout">
<input type="hidden" id="hi1">
<input type="hidden" id="hi2">
<input type="hidden" id="deptId">
<body>
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-sm-4">
        <h2>用户列表</h2>
        <ol class="breadcrumb">
            <li>
                <a href="/">控制台</a>
            </li>
            <li class="active">
                <strong>用户管理</strong>
            </li>
        </ol>
    </div>
        <div class="col-sm-8">
            <div class="title-action">
                <a href="javascript:;" onclick="" class="btn btn-primary"><i class="fa fa-pencil"></i> 添加</a>
                <!-- 增加按钮 -->
            </div>
        </div>
</div>

<div class="wrapper wrapper-content">
    <div class="ibox">
        <div class="ibox-content">
            <div id="content" class="row">
                <div id="left" style="height: 600px;background-color:#e7eaec" class="col-sm-2">
                    <div id="ztree" class="ztree"></div>
                </div>
                <div id="right" class="col-sm-10">
                    <div class="row">
                        <div class="col-sm-12">
                            <form id="searchForm" class="form-inline">
                                <input id="deptId" name="deptId" type="hidden" value="100">
                                <!-- 支持排序 -->
                                <div class="form-group">
                                    <span>登录名：</span>
                                    <input id="loginName" name="loginName" class=" form-control input-sm"
                                           value="" maxlength="50">

                                    <label id="officeName-error" class="error"   style="display:none"></label>
                                    <span>姓&nbsp;&nbsp;&nbsp;名：</span>
                                    <input id="userName" name="userName" class=" form-control input-sm" type="text" value=""
                                           maxlength="50">

                                    <button type="button" class="btn btn-sm btn-primary" id="search-btn"><i
                                                class="fa fa-search"></i> 搜索
                                    </button>
                                    </span>
                                </div>
                            </form>
                            <br>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-12">
                            <div class="jqGrid_wrapper">
                                <table id="datatable"></table>
                                <div id="table_pager"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script src="${request.contextPath}/static/ihomeStatic/js/jquery-2.1.1.min.js"></script>
<script src="${request.contextPath}/static/ihomeStatic/js/jquery.ztree.core.js"></script>
<script src="${request.contextPath}/static/ihomeStatic/js/bootstrap.min.js"></script>
<script src="${request.contextPath}/static/ihomeStatic/js/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${request.contextPath}/static/ihomeStatic/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="${request.contextPath}/static/ihomeStatic/js/layer/layer.js"></script>
<script src="${request.contextPath}/static/js/common-ui.js?v=3.0.0"></script>

<script>

    $(function () {
        tableInit(null);
        treeInit();



    });

    function tableInit(id) {
        console.log(id)
        var loginName = $("#loginName").val();
        var userName = $("#userName").val();
        $('#datatable').bootstrapTable({
            url: "${request.contextPath}/userManage/queryUserAll",                      //请求后台的URL（*）
            method: 'POST',                      //请求方式（*）
            contentType:"application/x-www-form-urlencoded",
            classes: 'table table-hover',  //table加样式
            theadClasses: "tableHead",                // 表头加样式
            //height: 400,
            // toolbar: '#toolbar',              //工具按钮用哪个容器
            striped: true,                     //是否显示行间隔色
            //cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            queryParams : function(params){
                return{
                    offset  : params.offset,
                    limit   : params.limit,
                    'loginName'  : loginName,
                    'userName': userName,
                    'deptId': id
                }

            },
            paginationLoop:false,                 //是否循环，从最后一页跳转到第一页（*）
            //sortable: true,                     //是否启用排序
            //sortOrder: "asc",                   //排序方式
            sidePagination: "client",             //分页方式：client客户端分页，server服务端分页（*）
            minimumCountColumns : 2,              //当列数小于此 值时，将隐藏内容列下拉框。
            paginationPreText : '上一页',
            paginationNextText : '下一页',
            pageNumber: 1,                        //初始化加载第一页，默认第一页,并记录
            pageSize : 5,                         //每页的记录行数（*）
            pageList : [5,10,15],                   //可供选择的每页的行数（*）
            search: false,                        //是否显示表格搜索
            strictSearch: false,
            showColumns: false,                   //是否显示所有的列（选择显示的列）
            //showRefresh: true,                  //是否显示刷新按钮
            //minimumCountColumns: 2,             //最少允许的列数
            // clickToSelect: true,               //是否启用点击选中行
            // uniqueId: "id",                    //每一行的唯一标识，一般为主键列
            // showToggle: false,                 //是否显示详细视图和列表视图的切换按钮
            // cardView: false,                   //是否显示详细视图
            // detailView: false,                 //是否显示父子表
            columns: [
                {
                    field: 'userId',
                    title: '',
                    undefinedText: "",
                    align: 'center'
                    // visible: false
                },{
                    field: 'loginName',
                    title: '登录名',
                    undefinedText: "",
                    align: 'center'
                    // visible: false
                }, {
                    field: 'userName',
                    title: '姓名',
                    undefinedText: "",
                    align: 'center',
                },{
                    field: 'deptName',
                    title: '归属部门',
                    undefinedText: "",
                    align: 'center'
                }, {
                    field: 'email',
                    title: '邮箱'
                }, {
                    field: 'phonenumber',
                    title: '手机',
                    undefinedText: "",
                    align: 'center'
                },{
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var html = "";
                        html += '  <a href="javascript:;"  onclick="view(\'' + row.userId + '\')"><i class="fa fa-edit"></i> 查看</a>';
                        html += '  <a href="javascript:;" onclick="update(\'' + row.userId + '\')" ><i class="fa fa-edit"></i> 编辑</a>';
                        html += '  <a href="javascript:;"   onclick="deleteForId(\'' + row.userId + '\')"><i class="fa fa-trash"></i> 删除</a>';
                        html += '  <a href="javascript:;" onclick=""><i class="fa fa-database"></i> 数据权限</a>';
                        return html
                    }

                }]
        });
    }
    $("#search-btn").click(function () {
        $('#datatable').bootstrapTable('destroy');
        tableInit(null);
    });

    function treeInit(){
        var setting = {

            check: {
                enable: true
            },
            view: {
                showIcon: true
            },
            callback:{
                onClick:zTreeOnClick
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId"
                }
            }
        };
        var _id = null;
        var _name = null;
        function zTreeOnClick(event, treeId, treeNode, clickFlag) {
            _id = treeNode.id;
            _name = treeNode.name;
            console.log(_id)
            tableInit(_id);
            // $("#deptId").val(_id);
        };
        $.ajax({
            url:"${request.contextPath}/userManage/department",
            success:function (data) {
                if (data!=null){
                    console.log(data)
                    $.fn.zTree.init($("#ztree"), setting, data);
                    var treeObj = $.fn.zTree.getZTreeObj("ztree");
                    treeObj.expandAll(true);//默认全部展开
                    console.log(treeObj);
                }
            },
            error:function (data) {
            }
        });
    }

    function view(id){
        layer.open({
            type: 2,
            area: ['700px', '500px'],
            fixed: false, //不固定
            maxmin: true,
            content: '${request.contextPath}/userManage/toView?userId='+id,

            end: function () {

                if($("#hi1").val() == "1"){
                    layer.msg('成功', {icon: 1});
                    window.location.reload();
                }else {

                }

            }
        });
    };
    function update(id){
        layer.open({
            type: 2,
            area: ['700px', '500px'],
            fixed: false, //不固定
            maxmin: true,
            content: '${request.contextPath}/userManage/toUpdate?userId='+id,

            end: function () {

                if($("#hi2").val() == "1"){
                    layer.msg('成功', {icon: 1});
                    window.location.reload();
                }else {

                }

            }
        });
    }

    function deleteForId(id) {

        layer.confirm('是否确定删除？', {
            btn: ['是','否'] //按钮
        }, function(){
            $.ajax({
                url:"${request.contextPath}/userManage/delete?userId="+id,
                type:"POST",
                success:function (data) {
                    if(data.code!=null || data.code!="")
                        window.location.reload();
                },
                error:function () {
                    alert("erer")
                }
            });
            layer.msg('删除成功', {icon: 1});
        }, function(){
        });

    }



    // function refreshTree() {
    //     $.getJSON("/User/department", function (data) {
    //         $.fn.zTree.init($("#ztree"), setting, data).expandAll(true);;
    //     });
    // }
    // refreshTree();




</script>
</html>
